<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>综合告警</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="#/historicalAlarm" style="cursor: pointer; color: #fff"
          >历史告警</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div style="margin: 20px 0">
      <span>告警时间：</span>
      <el-radio v-model="radio" label="1">近24小时</el-radio>
      <el-radio v-model="radio" label="2">近7天</el-radio>
      <el-radio v-model="radio" label="3">近30天</el-radio>
      <el-radio v-model="radio" label="4">自定义时段</el-radio>
    </div>
    <div class="flex">
      <div class="top">
        <div style="position: relative">
          <div class="title">
            <div style="margin-left: 10px">全部告警事件构成</div>
          </div>
        </div>
        <div class="flex1">
          <div id="main" style="height: 200px; width: 50%"></div>
          <div id="main1" style="height: 200px; width: 50%"></div>
        </div>
      </div>
      <div class="top">
        <div style="position: relative">
          <div class="title">
            <div style="margin-left: 10px">未处理告警事件构成</div>
          </div>
        </div>
        <div class="flex1">
          <div id="main2" style="height: 200px; width: 50%"></div>
          <div id="main3" style="height: 200px; width: 50%"></div>
        </div>
      </div>
    </div>
    <el-radio-group v-model="radio" style="margin: 20px 0">
      <el-radio-button label="遥测量越限"></el-radio-button>
      <el-radio-button label="遥信量变位"></el-radio-button>
      <el-radio-button label="能耗越限"></el-radio-button>
      <el-radio-button label="仪表通讯"></el-radio-button>
      <el-radio-button label="SOE"></el-radio-button>
    </el-radio-group>
    <div class="select">
      <div class="flex">
        <span>采集器：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">设备：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">测点：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">告警等级：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">确认状态：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">恢复状态：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div style="width: 120px; margin-left: 10px">
          <el-input v-model="value" placeholder="名称关键字"></el-input>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          style="margin-left: 10px"
          >搜索</el-button
        >
      </div>
      <div>
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px; margin-right: 10px"
          >批量确认</el-button
        >
        <i class="el-icon-download" style="cursor: pointer"></i>
      </div>
    </div>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      cell-style="color:#fff"
      header-cell-style="color:#fff;background:rgb(27, 79, 133)"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="1" label="设备归属"></el-table-column>
      <el-table-column prop="2" label="设备名称"></el-table-column>
      <el-table-column prop="3" label="设备用途"></el-table-column>
      <el-table-column prop="4" label="测是点"></el-table-column>
      <el-table-column prop="5" label="事件类型"></el-table-column>
      <el-table-column prop="6" label="越限时间"></el-table-column>
      <el-table-column prop="7" label="恢复时间"></el-table-column>
      <el-table-column prop="8" label="越限时长"></el-table-column>
      <el-table-column prop="9" label="实测值"></el-table-column>
      <el-table-column prop="10" label="门限值"></el-table-column>
      <el-table-column prop="11" label="告警等级"></el-table-column>
      <el-table-column label="操作">
        <template>
          <div class="flex" style="flex-wrap: wrap">
            <div style="font-size: 25px; cursor: pointer">
              <i class="el-icon-folder-checked" style="margin-left: 5px"></i>
            </div>
            <div style="font-size: 25px; cursor: pointer">
              <i class="el-icon-tickets" style="margin-left: 5px"></i>
            </div>
            <div style="font-size: 25px; cursor: pointer">
              <i class="el-icon-video-camera" style="margin-left: 5px"></i>
            </div>
            <img
              src="../../assets/icon/SVG.png"
              alt=""
              style="margin-left: 5px; width: 25px; height: 25px"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px 0; text-align: end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1"
      >
      </el-pagination>
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      radio: "遥测量越限",
      tableData: [
        {
          1: "一期办公楼配电室",
          2: "电能质量基本数据",
          3: "测试",
          4: "BC线电压上偏差",
          5: "高限告警",
          6: "2023-01-05 09;22:42",
          7: "- -",
          8: "",
          9: "9.55",
          10: "7",
          11: "一般",
        },
      ],
      multipleSelection: [],
      currentPage: 1,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = (option = {
        //环形图中间文字
        title: {
          text: "总数",
          subtext: 130,
          textStyle: {
            fontSize: 12,
            color: "#fff",
            fontWeight: 400,
          },
          subtextStyle: {
            fontSize: 20,
            color: "#fff",
            fontWeight: 500,
          },
          textAlign: "center", //图例文字居中显示
          x: "49%", //距离左边的距离
          y: "38%", //距离上边的距离
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 100, name: "一般:100" },
              { value: 10, name: "严重:10" },
              { value: 20, name: "紧急:20" },
            ],
          },
        ],
      });
      myChart.setOption(option);
    },
    initCharts1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main1"));

      // 指定图表的配置项和数据
      var option = (option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["SOE", "能耗越限", "遥信量变化", "遥测量越线"],
          axisLabel: {
            //y轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "一般",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [10, 205, 9, 35],
          },
          {
            name: "严重",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [, 319, ,],
          },
          {
            name: "紧急",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [, , ,],
          },
        ],
      });
      myChart.setOption(option);
    },
    initCharts2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main2"));

      // 指定图表的配置项和数据
      var option = (option = {
        //环形图中间文字
        title: {
          text: "总数",
          subtext: 130,
          textStyle: {
            fontSize: 12,
            color: "#fff",
            fontWeight: 400,
          },
          subtextStyle: {
            fontSize: 20,
            color: "#fff",
            fontWeight: 500,
          },
          textAlign: "center", //图例文字居中显示
          x: "49%", //距离左边的距离
          y: "38%", //距离上边的距离
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 100, name: "一般:100" },
              { value: 10, name: "严重:10" },
              { value: 20, name: "紧急:20" },
            ],
          },
        ],
      });
      myChart.setOption(option);
    },
    initCharts3() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main3"));

      // 指定图表的配置项和数据
      var option = (option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["SOE", "能耗越限", "遥信量变化", "遥测量越线"],
          axisLabel: {
            //y轴文字的配置
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "一般",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [10, 205, 9, 35],
          },
          {
            name: "严重",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [, 319, ,],
          },
          {
            name: "紧急",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [, , ,],
          },
        ],
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initCharts();
    this.initCharts1();
    this.initCharts2();
    this.initCharts3();
  },
};
</script>
    
<style scoped>
.title {
  margin: 10px;
}
.title::after {
  content: "";
  width: 5px;
  height: 20px;
  background: rgb(82, 124, 240);
  position: absolute;
  top: 0;
  left: 10px;
}
.top {
  width: 50%;
  height: 250px;
  border: 3px solid rgb(7, 62, 109);
}

.jianchajieguo {
  position: absolute;
  right: 20px;
  top: 20px;
}

.right1 {
  width: 33%;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
}

.right2 {
  width: 67%;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  position: relative;
}

.biaoti {
  margin: 20px 0;
}
.biaoti::after {
  content: "";
  width: 5px;
  height: 20px;
  background: rgb(82, 124, 240);
  position: absolute;
  top: 0;
  left: 0;
}

.left {
  width: 20vw;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  margin: 20px 0;
}

.right {
  width: 80vw;
  height: 100%;
  border: 3px solid rgb(7, 62, 109);
  margin: 20px 0;
}

.select {
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.el-select {
  width: 120px !important;
  /* border: 1px solid #fff !important; */
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  /* border: 1px solid #fff; */
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: transparent;
  color: #fff;
}

::v-deep .el-tree-node > .el-tree-node__content:hover {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #fff;
  background: rgb(27, 79, 133) !important;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #fff;
}

::v-deep .el-radio__label {
  color: #fff;
}

i {
  width: 30px;
  height: 30px;
}
</style>